<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";

    var x = 200 , y = 200 , r = 100 , step = Math.PI * 2 / 3,
        start = -Math.PI / 2,
        colors = ['red' , 'green' , 'blue'];

    for(var i = 0 ; i < 3 ; i ++){
        ctx.beginPath();
        ctx.moveTo( x , y);
        ctx.fillStyle = colors[i];
        ctx.arc( x , y , r , start , start += step);
        ctx.fill();

    }
</script>
</body>
</html>